<template>
  <div class="recommendValue" @click="jump(data.id)">
    <img :src="data.img_url" alt="" />
    <div class="title">{{ data.title }}</div>
    <span class="price">¥{{ data.sell_price }}</span>
    <slot>
      <span class="quantity">{{ data.stock_quantity }}购买</span>
    </slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recommendData: "",
    };
  },
  methods:{
    jump(id){
      this.$router.push(`/recommenddetails?id=${id}`)
    }
  },
  created(){

  },
  props: {
    data: {},
  },
};
</script>

<style lang="scss" scoped>
$ui-width: 720;
$num: 15;
$baseFontSize: 50; // 750 / 15
@function px2rem($px) {
  @return $px / $baseFontSize + rem;
}

.recommendFont {
  width: 100px;
  background-color: #f0f0f0;
  text-align: center;
  z-index: 1;
  position: relative;
  display: block;
  font-size: px2rem(16);
  margin: auto;
}

hr {
  position: absolute;
  top: 0;
  left: 5%;
  width: 90%;
}

.recommendValue {
  width: 46%;
  margin: px2rem(5) 0;
  display: inline-block;
  border-radius: 15px;
  overflow: hidden;
  padding: 10px 4px;
  background-color: white;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  img {
    width: 90%;
    margin: auto;
    height: px2rem(260);
    display: inline-block;
  }
  .title {
    font-size: px2rem(15);
    width: 100%;
    margin-bottom: 10px;
    /*强制文字在一行文本框内*/
    white-space: nowrap;
    /*溢出部分文字隐藏*/
    overflow: hidden;
    /*溢出部分省略号处理*/
    text-overflow: ellipsis;
  }
  .price {
    font-size: px2rem(15);
    color: #ff5510;
    width: 50%;
    display: inline-block;
  }
  .quantity {
    font-size: px2rem(14);
    color: #999999;
  }
}
</style>